<template>
  <n-config-provider :theme="theme">
    <n-notification-provider container-style="top:25px">
      <n-message-provider placement="bottom-right" >
        <HelloWorld ref="hw" :theme="theme" @light="light"/>
      </n-message-provider>
    </n-notification-provider>
    <n-global-style/>
  </n-config-provider>
</template>

<script setup>
import {ref, onMounted} from 'vue'

import HelloWorld from './components/HelloWorld.vue'
import {darkTheme, lightTheme} from 'naive-ui'

const name = 'App'
const theme = ref(darkTheme)

const light = () => {

  if (theme.value.name === 'dark') {
    theme.value = lightTheme
  } else {
    theme.value = darkTheme
  }
}
</script>

